@mixin clearfix {
    zoom: 1;
    &:before {
        content: '';
        display: table;
    }
    &:after {
        content: '';
        display: table;
        clear: both;
    }
}

html,
body {
    height: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 560px;
    font-family: "microsoft yahei light", "microsoft yahei", "\5fae\8f6f\96c5\9ed1", sans-serif;
    background: url(../images/map_bg.png) center top no-repeat;
    background-size: cover;
}

.time-box {
    position: relative;
    font-size: 45px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    width: 440px;
    margin: 40px auto;
    -webkit-perspective: 480px;
    transform-style: preserve-3d;
    @include clearfix;
}

.year,
.month,
.day {
    // @include clearfix;
    float: left;
}

.month {
    margin: 0 20px;
}

.num {
    float: left;
    position: relative;
    width: 40px;
    height: 65px;
    background: url(../images/count_bg.png);
    line-height: 65px;
    transform-style: preserve-3d;
    -webkit-perspective: 480px;
}

.up {
    top: 0;
    left: 0;
    position: absolute;
    width: 40px;
    height: 65px;
    background: url(../images/count_num_bg.png);
    clip: rect(0, 40px, 32px, 0);
    backface-visibility: hidden;
}

.down {
    top: 0;
    left: 0;
    position: absolute;
    width: 40px;
    height: 65px;
    background: url(../images/count_num_bg.png);
    clip: rect(33px, 40px, 65px, 0);
    backface-visibility: hidden;
}

.b-up {
    transform: rotateX(-180deg);
}

.b-down {
    transform: rotateX(180deg);
}

$transition1: 0.5s;
.flip-up .f-down {
    transition: $transition1;
    transform: rotateX(180deg);
}

.flip-up .b-up {
    transition: $transition1;
    transform: rotateX(0);
    z-index: 10;
}

.flip-up .b-down {
    transform: rotateX(0);
}

.flip-down .f-up {
    transition: $transition1;
    transform: rotateX(-180deg);
}

.flip-down .b-up {
    transform: rotateX(0);
}

.flip-down .b-down {
    transform: rotateX(0);
    transition: $transition1;
    z-index: 10;
}

.prev-day,
.next-day {
    float: left;
    width: 40px;
    height: 65px;
    cursor: pointer;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    &:hover {
        transform: scale(1.25);
        -webkit-transform: scale(1.25);
    }
}

.prev-day {
    background: url(../images/prev_day.png) center left no-repeat;
}

.next-day {
    background: url(../images/next_day.png) center right no-repeat;
}
